window.addEventListener('DOMContentLoaded', function() {
    var lis = this.document.querySelectorAll('.box>ul>li');
    var cloud = this.document.querySelector('.cloud');
    var liWidth = cloud.clientWidth;
    var animate = function(obj, moveTo) {
        clearInterval(obj.timer);
        obj.timer = setInterval(() => {
            console.log(obj.offsetLeft + ", " + moveTo);
            if (obj.offsetLeft == moveTo) clearInterval(obj.timer);
            var flag = (moveTo - obj.offsetLeft) / 10;
            flag = flag > 0 ? Math.ceil(flag) : Math.floor(flag);
            obj.style.left = obj.offsetLeft + flag + 'px';
        }, 10);
    }
    var current = 0;
    for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute('index', i);
        lis[i].addEventListener('click', function() { 
            current = this.getAttribute('index');
        });
        lis[i].addEventListener('mouseenter', function() {
            animate(cloud, this.getAttribute('index') * liWidth);
            console.log('enter');
        });
        lis[i].addEventListener('mouseleave', function() {
            animate(cloud, current * liWidth);
            console.log('out');
        });
    }
})